/**
 * Variables
 */
$base-background: white;
$text-color: #212121;
$article-tag: green;
$lang-tag: red;
$link-color: #2962FF;
$target-color: yellow;
$separator-decoration: "//////";

/**
 * Mixins
 */
@mixin darkmode {
  background: $text-color !important;
  color: $base-background !important;

  blockquote {
    color: rgba($base-background, 0.7);
    border-color: rgba($base-background, 0.7);
  }

  a {
    color: $link-color;
  }

  code {
    background-color: rgba($base-background, 0.2) !important;
  }

  pre code {
    background-color: inherit !important;
  }

  time {
    color: rgba($base-background, 0.7) !important;
  }

  .footer-social-media {
    a {
      &:after {
        color: rgba($base-background, 0.7) !important;
      }
    }
  }

  #toggle-theme {
    fill: $base-background;
  }
}

/**
 * Style
 */
html {
  height: 100%;
}

body {
  font-family: monospace;
  font-size: 1.2rem;
  line-height: 1.4rem;
  margin: 0;
  min-height: 100%;
}

body.dark {
  @include darkmode;
}

body[darkmode] {
  @include darkmode;
}

html,
body {
  background: $base-background;
}

header {
  padding: 2rem 0;
  margin: 0 auto;
  max-width: 750px;
  width: 95%;

  img {
    border-radius: 50%;
  }
}

main {
  padding: 2rem 0;
  margin: 0 auto;
  max-width: 960px;
  width: 95%;
}

hr {
  text-align: center;
  border: 0;

  &:before {
    content: $separator-decoration;
  }
  &:after {
    content: $separator-decoration;
  }
  &[text]:after {
    content: " " attr(text) " " $separator-decoration;
  }
}

a {
  color: $link-color;
  text-decoration: underline;
}

blockquote {
  color: rgba($text-color, 0.7);
  border-left: 2px solid rgba($text-color, 0.7);
  padding: 0 1rem;
  margin: 2rem 0;
}

.footer-social-media {
  a {
    &:after {
      content: " \00D8 ";
      display:inline-block;
      margin: 0 10px;
      color: rgba($text-color, 0.7);
    }
    &:last-child:after {
      display: none;
    }
  }
}

.chips {
  span {
    background: $text-color;
    padding: 3px 10px;
    border-radius: 1.4rem;
    color: $base-background;
    margin: 0 3px;

    &.tag {
      background-color: rgba($article-tag, 0.8);

      &::before {
        content: '#';
      }
    }

    &.lang {
      cursor: pointer;
      background-color: rgba($lang-tag, 0.8);
    }
  }

  &.chips-inline {
    display: inline-block;
    span {
      padding: 1px 8px;
    }
  }
}

article {
  cursor: pointer;
  position: relative;

  h3 {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    transition: text-decoration-color .3s ease;
  }

  &:hover {
    h3 {
      text-decoration-color: $link-color;
    }
  }

  time {
    position: absolute;
    top: 2px;
    right: 0;
    color: rgba($text-color, 0.7);
  }

  .chips span.lang {
    cursor: default;
  }
}

main.article-content {
  position: relative;
  p {
    text-align: justify;
  }

  img {
    display: block;
    max-width: 90%;
    margin: 1rem auto;
    max-height: 80vh;

    & + em {
      color: rgba($text-color, 0.7);
      text-align: center;
      display: block;
    }
  }

  code {
    background: $text-color;
    color: $base-background;
    padding: 1px 8px;
  }

  pre {
    background: $text-color !important;
    color: $base-background;
    padding: 1rem;
    overflow-x: auto;
    overflow-y: visible;
  }

  .footnote-definition {
    padding: 0 1rem;
    &:target {
      background: $target-color;
      color: $text-color;
    }
    p {
      display: inline-block;
    }
  }
}

footer {
  padding: 1rem 0;
  margin: 0 auto;
  max-width: 540px;
  text-align: center;
}

#toggle-theme {
  fill: $text-color;
  cursor: pointer;

  svg {
    height: 24px;
    width: 24px;
    vertical-align: middle;
  }
}